<template>
  <div>
    <y-header></y-header>
    <el-main>
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item><a href="/">热门商品</a></el-breadcrumb-item>
      </el-breadcrumb>
      <div class="search">
        <el-input placeholder="请输入内容" v-model="query.searchName" class="input-with-select">
        <el-button slot="append" @click="getList()" icon="el-icon-search"></el-button>
      </el-input>
      </div>
      <div class="main" v-loading="loading">
        <el-row>
          <el-col
            :span="3"
            v-for="(item, index) in dataList"
            :key="item.id"
            :offset="index > 0 ? 1 : 0"
          >
            <el-card :body-style="{ padding: '0px' }">
              <div style="width:100%">
                <img
                  :src="item.mainUrl ? item.mainUrl: 'https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png'"
                  class="image"
                />
              </div>
              <div style="padding: 14px">
                <span>{{ item.name }}</span>
                <div class="bottom clearfix">
                  <time class="time">￥{{ item.price }}</time>
                  <el-button type="text" class="button" @click="addCar(item)"
                    >加入购物车</el-button
                  >
                </div>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </div>
    </el-main>
  </div>
</template>
<script>
import { getComputer, add } from "../../api/index";
import YHeader from '../../common/Header';
import { utilsMessage } from '../../utils/utils';
export default {
    components:{
        YHeader
    },
  data() {
    return {
      currentDate: new Date(),
      query: {
        pageNo: 1,
        pageSize: 10,
        searchName: "",
        memberId: "",
      },
      dataList: [],
      loading: false,
    };
  },
  methods: {
    getList() {
      this.loading = true;
      getComputer(this.query).then((res) => {
        // console.log(res);
        this.dataList = res.data.list;
        this.loading = false;
      });
    },
    addCar(item) {
      let list = this.$store.state.cars || [] , arr = [];
      list.forEach(i =>{
        arr.push(i.id);
      });
      if(arr.indexOf(item.id) == -1){
        list.push({
          memberId: this.$store.state.memberId,
          productId: item.id,
          num: 1,
          checked: 1,
          ...item
        });
        localStorage.setItem("cars", JSON.stringify(list));
        this.$store.commit('setCars',list);
        add(list).then((res) => {
          // console.log(res);
          if(res.data){
            utilsMessage(res.msg);
          }
        });
      }else{
        utilsMessage('购物车已存在该商品','warning');
      }
    },
  },
  mounted() {
    this.getList();
  },
};
</script>
<style lang="scss">
.main {
  padding: 30px 10px 0;
}
.time {
  font-size: 14px;
  color: #999;
  display: -webkit-box; 
  overflow: hidden;
  -webkit-box-orient: vertical; 
  -webkit-line-clamp: 1; 
}

.bottom {
  margin-top: 13px;
  line-height: 12px;
}

.button {
  padding: 0;
  float: right;
}

.image {
  width: 170px;
  height: 170px;
  margin: 1px auto;
  display: block;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both;
}
.search{
  position: absolute;
  width: 200px;
  height: 30px;
  right: 50px;
  top: 60px;
}
</style>